<table id="demo" lay-filter="test"></table>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <button id="btn" class="layui-btn layui-btn-xs layui-bg-blue" data-clipboard-text="{{d.connect_key}}" >复制通信密钥</button>
</script>

<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-bg-green" lay-event="add">添加APP</button>
    </div>
</script>
<script src="/i/js/clipboard.min.js"></script>

<script>
    function formatDate(now) {
        if (now === "0") {
            return "无";
        }

        now = new Date(now * 1000);
        return now.getFullYear()
            + "-" + (now.getMonth() > 8 ? (now.getMonth() + 1) : "0" + (now.getMonth() + 1))
            + "-" + (now.getDate() > 9 ? now.getDate() : "0" + now.getDate())
            + " " + (now.getHours() > 9 ? now.getHours() : "0" + now.getHours())
            + ":" + (now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes())
            + ":" + (now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds());

    }

    var myTable, table, form;
    layui.use(['form', 'table', 'laydate','okLayer'], function () {
        table = layui.table;
        form = layui.form;
        var $=layui.$;
        var clipboard = new ClipboardJS('#btn');
        let okLayer = layui.okLayer;
        clipboard.on('success', function(e) {
            layer.msg("复制成功");
        });

        clipboard.on('error', function(e) {
            layer.msg("复制失败");
        });
        //第一个实例
        myTable = table.render({
            elem: '#demo'
            , height: 'full-40'
            , url: "<{url('admin/api','GetApp')}>"
            ,limit: 15
            ,page: true
            ,even: true
            ,toolbar: "#toolbarTpl"
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 60},
                {title: '操作', width: 168, align: 'center', toolbar: '#barDemo'},
                {field: 'app_name', title: '应用名称', minWidth: 200},
                {field: 'return_url', title: '同步回调地址', minWidth: 380},
                {field: 'notify_url', title: '异步回调地址', minWidth: 380},
                {field: 'connect_key', title: '通讯密钥', minWidth: 400}
            ]]
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确定要删除该应用吗？', function (index) {
                    layer.msg('操作中', {
                        icon: 16
                        , shade: 0.01
                    });

                    $.post("<{url('admin/api','DelApp')}>", "id=" + data.id, function (data) {
                        data = JSON.parse(data);
                        if (data.code === Api_Ok) {

                            layer.msg("操作成功！");
                            myTable.reload();
                        } else {
                            layer.msg(data.msg);
                        }


                    });


                });
            }

        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
           var layEvent=obj.event;
            if(layEvent==="add"){
                okLayer.open("添加应用", "<{url m='admin' c='main' a='addApp'}>" , "58%", "90%", null, function () {
                    myTable.reload();
                })
            }
        });

        form.render();

    });


</script>
